<template>
	<view class="build-wrap">
		<view class="build-head u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20 u-font-36">
			<view style="display: flex;">
				<image  class="top-logo" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/loufang.png"></image>
				<view style="font-weight: 700;font-size: 20px;">
					{{porName}}
					<text style="font-size: 12px;color: #999;margin-left: 100px;">
						<text>{{proArea}}/㎡</text>
						<text style="margin-left: 20px;">{{proHouseholds}}户</text>
					</text>
				</view>
			</view>
			<view style="font-size: 16px;margin-top: 5px;color: #999;">
				{{proAddress}}
			</view>
		</view>
		
		<view  class="nav_item" v-if="qiList.length>0" v-for="(item,index) in qiList">
			<view class="nav_number" @click="toBuild(item.buildDistrictCode,index)">
				<view class="nav_itemtitle" style="display: flex;">
					<image  class="top-logo" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/issue.png"></image>
					<view style="margin-top: 1px;">
						{{item.buildDistrictCode}}<span style="color:#333">（区/期）</span>
					</view>
				</view>
				<view style="padding: 0 20px 0 0;">
					<image class="image" v-if="!item.status" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/mailXiaLa2.png"></image>
					<image class="unit_image" v-if="item.status" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/up.png"></image>
				</view>
			</view>
			
			<view class="nav_itemBox" v-if="item.status">
				<view style="padding: 10px 0;">
					<view>
						<view v-for="(items,indexs) in item.BuildingList">
							<view class="nav_itemBuilding" @click="getTower(items.buildId,items,index,indexs)">
								<view>
									<span style="font-size: 16px;"> {{items.buildTowerCode}}号楼</span>
								</view>
								<view>
									<image class="image" v-if="!items.status"  src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/mailXiaLa2.png"></image>
									<image class="unit_image" v-if="items.status"  src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/up.png"></image>
								</view>
							</view>
							
							<view v-if="items.status">
								<view v-for="(items1,indexs1) in items.towerData">
									<view    class="unit"  @click="getUnit(items.buildId,items1.roomUnitNumber,indexs1,index,indexs)">
										{{items1.roomUnitNumber}}单元
										<image class="image" v-if="!items1.status3" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/mailXiaLa2.png" ></image>
										<image class="unit_image"  v-if="items1.status3"  src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/up.png"></image>
									</view>
									<view v-if="items1.status3">
										<view class="from_box">
											<view class="tab" >
												<view v-if="items1.status3" v-for="(items2,indexs2) in items1.roomData">
													<view class="tab_box" style="background:#fff;display: flex; justify-content:space-between" @click="strBtn(item.buildDistrictCode,items.buildTowerCode,items2)">
														<view>{{items2.roomCode}}(室)</view>
														<view>{{items2.ownerName}}</view>
														<view>{{items2.roomAreaOfStructure}}/㎡</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>	
						</view>
					</view>	
				</view>
			</view>
			
		</view>
		
		<view v-else class="build-list u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20 u-font-32">
			当前项目没有导入楼宇
		</view>
		
		<u-modal @confirm='queryBtn' :zoom='false' v-model="modelShow" :show-title='false' :show-cancel-button='true'
		 confirm-color="#F9A832">
			<view class="u-p-t-30 u-p-l-50 u-p-r-50 u-font-28" style="display: flex;">
				<image  class="top-logo" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/loufang.png"></image>
				<view style="font-weight: 700;font-size: 20px;">
					{{content}}
				</view>
			</view>
			<view class="u-p-t-20 u-p-b-30 u-p-l-50  u-font-28">
				确认信息是否正确？
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qiList: [{
					BuildingList:[],
					status:false,
				}],
				porName: null,
				proArea:null,
				proAddress:null,
				proHouseholds:null,
				modelShow: false,
				content: null,
				item: null,
			}
		},
		onShow() {
			this.porName = this.$Route.query.name
			this.proArea = this.$Route.query.area
			this.proAddress = this.$Route.query.address
				this.proHouseholds = this.$Route.query.households
			this.getQiList()
		},
		methods: {
			// 获取期
			getQiList() {
				this.$request.api.qi({
					pro_id:this.$Route.query.id
				}).then(resp => {
					if(resp.data.data){
						this.qiList = resp.data.data
					}
				})
			},
			
			//点击期号获取楼号
			toBuild(val,index) {
				//2023-09-15 修改样式 改为下拉抽屉样式 zwl
				if(!this.qiList[index].BuildingList){
					uni.showLoading({
						title:"加载中"
					})
					this.$request.api.build({
						pro_id:this.$Route.query.id,
						dis_code:val
					}).then(resp => {
						if(resp.data.data){
							this.qiList[index].BuildingList = resp.data.data
							if(this.qiList[index].status){
								this.qiList[index].status = false
							}else{
								this.qiList[index].status = true
							}
							uni.hideLoading();
							this.$forceUpdate();
						}
					})
				}else{
					if(this.qiList[index].status){
						this.qiList[index].status = false
					}else{
						this.qiList[index].status = true
					}
					this.$forceUpdate();
				}
			},
			
			//点击楼号后去单元号
			getTower(val,items,index,indexs){
				console.log('this.qiList[index].BuildingList[indexs].status',this.qiList[index].BuildingList[indexs].status)
				if(!this.qiList[index].BuildingList[indexs].towerData){
					uni.showLoading({
						title:"加载中"
					})
					
					this.$request.api.dan({
						pro_id:this.$Route.query.id,
						build_id:val
					}).then(resp => {
						if(resp.data.data){
							this.qiList[index].BuildingList[indexs].towerData = resp.data.data
							if(this.qiList[index].BuildingList[indexs].status){
								this.qiList[index].BuildingList[indexs].status = false
							}else{
								this.qiList[index].BuildingList[indexs].status = true
							}
							uni.hideLoading();
							this.$forceUpdate();
						}
					})
				}else{
					if(this.qiList[index].BuildingList[indexs].status){
						this.qiList[index].BuildingList[indexs].status = false
					}else{
						this.qiList[index].BuildingList[indexs].status = true
					}
					this.$forceUpdate();
				}
			},
			
			//点击单元号获取房间号
			getUnit(build_id,unit_id,indexs1,index,indexs){
				if(!this.qiList[index].BuildingList[indexs].towerData[indexs1].roomData){
					uni.showLoading({
						title:"加载中"
					})
					this.$request.api.home({
						pro_id: this.$Route.query.id,
						build_id: build_id,
						unit_id: unit_id
					}).then(respe => {
						this.qiList[index].BuildingList[indexs].towerData[indexs1].roomData = respe.data.data
						if(this.qiList[index].BuildingList[indexs].towerData[indexs1].status3){
							this.qiList[index].BuildingList[indexs].towerData[indexs1].status3 = false
						}else{
							this.qiList[index].BuildingList[indexs].towerData[indexs1].status3 = true
						}
						uni.hideLoading();
						this.$forceUpdate();
					})
				}else{
					if(this.qiList[index].BuildingList[indexs].towerData[indexs1].status3){
						this.qiList[index].BuildingList[indexs].towerData[indexs1].status3 = false
					}else{
						this.qiList[index].BuildingList[indexs].towerData[indexs1].status3 = true
					}
					this.$forceUpdate();
				}
			},
			
			//点击房间号确认弹窗
			strBtn(build_code,tower_code,val) {
				this.item = val;
				this.content = build_code + '-' + tower_code + '-' + val.roomUnitNumber + '-' + val.roomCode
				this.modelShow = true
			},
			
			//确认按钮
			async queryBtn() {
				console.log("确定绑定")
				let res = await this.$request.api.queryHome({
					open_id: uni.getStorageSync('openId'),
					mobile: uni.getStorageSync('phone'),
					room_id: this.item.roomId
				})
				// 0 手机号不一致  1 通过   2 已提交房本 等待审核  3后台认证失败  4不通过
				if (res.data.data == 0) {
					this.$Router.push({
						path: '/homePage1/uploadRoon/uploadRoon',
						query: {
							room_id: this.item.roomId,
							type:1
						}
					})
				} else if (res.data.data == 1) {
					this.$Router.push({
						path: '/homePage1/examine/examine',
						query: {
							examineNum: 1
						}
					})
				} else if (res.data.data == 2) {
					this.$Router.push({
						path: '/homePage1/examine/examine',
						query: {
							examineNum: 2
						}
					})
				} else if (res.data.data == 3) {
					this.$Router.push({
						path: '/homePage1/examine/examine',
						query: {
							examineNum: 3,
							room_id: this.item.roomId
						}
					})
				}
			}
		}
	}
</script>

<style lang='scss'>
	.build-wrap {
		width: 100vw;
		height: 100vh;
		padding: 0 20px;
		
		.build-head {
			border-bottom: 1px solid #f4f4f4;
			color: #333;
		}

		.build-list {
			border-bottom: 1px solid #f4f4f4;
			color: #333;
		}
		
		.top-logo {
			width: 20px;
			height: 20px;
			border-radius: 3rpx;
			margin-bottom: -5px;
			margin-right: 4px;
		}
	}

	.nav_item {
		padding: 10px 0;
		border-bottom: 1px solid #eee;
		
		.top-logo {
			width: 20px;
			height: 20px;
			border-radius: 3rpx;
			margin-bottom: -5px;
			margin-right: 4px;
		}
		
		.nav_number {
			display:flex;
			align-items: center;
			justify-content: space-between
		}

		.nav_itemtitle {
			padding: 10px 20px;
			color: #007000;
			font-size: 36rpx;
			border-radius: 9px;
		}

		.nav_itemBox {
			background: #fff;
			width: 93%;
			margin: 0 auto;
			border-radius: 9px;
		}

		.nav_itemBuilding {
			padding: 13px 20px;
			border-bottom: 1px solid #f4f4f4;
			display: flex;
			justify-content: space-between
		}

		.image {
			width: 15px;
			height: 15px;
			// margin-left: 99px;
		}

		.unit {
			color: #666666FF;
			padding: 10px 30px;
			border-bottom: 1px solid #f4f4f4;
			margin-left: 10px;
			display: flex;
			justify-content: space-between
		}

		.unit .image {
			width: 15px;
			height: 15px;
		}

		.unit_image {
			width: 16px;
			height: 9px;
			// margin-left: 103px;
			margin-top: 5px;
		}

		.from_box {
			// border: 1px solid #f4f4f4;
			width: 90%;
			margin: 10px auto;
			background: #f4f4f4;
			border-radius: 5px;
		}

		.from_boxtelete {
			padding: 10px 20px;
		}

		.tab {
			width: 100%;
			background: #ffffff;
			padding: 0 20px;
		}

		.tab_box {
			display: flex;
			justify-content: space-between;
			padding: 8px 10px;
			border-bottom: 1px solid #eee;
			color: #000;
			font-size: 12px;

		}

		.tab_box1 {
			display: flex;
			justify-content: space-between;
			padding: 5px 10px;
			border-bottom: 1px solid #999;
			color: #CCCCCC;
			background: #fff;
			font-size: 12px;

		}
	}
</style>